import EHeader from '../../common/EHeader';
import ItemTab from '../../common/ItemTab';
import List from '../../common/List';
import { WeaLocaleProvider } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { Spin } from 'antd';
import { toJS } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

@inject('wfCenterStore')

@observer 
class Main extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      currentTab: '0',
    }
  }
  componentDidMount() {
    const  { getReportList } = this.props.wfCenterStore;
    getReportList({}, this.changeState);
  }
  componentWillReceiveProps(nextProps) {
    const  { getReportList } = this.props.wfCenterStore;
    if(this.props.location.key !== nextProps.location.key) {
      getReportList({}, this.changeState);
    }
  }
  shouldComponentUpdate(nextProps,nextState) {
      return true;
  }
  changeState = (obj={}) => {
    this.setState({
      currentTab: obj.tabs && obj.tabs[0].key
    });
  }
  changeTab = (v) => {
    const { getTabSwitch } = this.props.wfCenterStore;
    this.setState({
      currentTab: v
    })
    getTabSwitch('analysis', {key: v})
  }
  moreBtnClick = () => {
    const { currentTab } = this.state;
    let url = '/spa/workflow/index_mobx.jsp#/main/workflow/customReportForm?jumpTab=' + currentTab;
    window.open(url, '_blank');
  }
    render() {
      const { currentTab } = this.state;
      const { loadingStatusObj:{ analysisHasLoaded }, reportListData={} } = this.props.wfCenterStore;
      let info = toJS(reportListData).datas && 
          toJS(reportListData).datas.length > 0 && 
          toJS(reportListData).datas.filter( v => v.key == currentTab)[0] 
          || [];
      return(
        <div className='wf-center-ele-item'>
          <EHeader ecId={`${this && this.props && this.props.ecId || ''}_EHeader@55mlfn`} 
            title={getLabel(382259, '报表分析')}
            toolSetting={{more:true}}
            moreBtnClick={this.moreBtnClick}/>
          <div className='wf-center-ele-content'>
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@7rpqdc`} spinning={!analysisHasLoaded}/>
              {analysisHasLoaded && <div className='analysis-element-div'>
                <ItemTab ecId={`${this && this.props && this.props.ecId || ''}_ItemTab@yhalyt`} 
                  tabs={reportListData.tabs} 
                  activeTab={this.state.currentTab} 
                  changeTab={this.changeTab}
                />
                <List ecId={`${this && this.props && this.props.ecId || ''}_List@kil7fk`} listData={info.data}/>
              </div>
            }
          </div>
        </div>
      ) 
      
    }
}

export default Main